{% extends 'base.html' %}

{% block out_body %}
    <div id="app">
        {% verbatim myblock %}
            <el-form size="small" :model="searchForm" ref="searchForm" inline style="margin-top: 6px">
                <el-form-item label="作者姓名" prop="first_name">
                    <el-input v-model="searchForm.first_name" placeholder="请输入用户姓名"></el-input>
                </el-form-item>
                <el-form-item label="标题" prop="title">
                    <el-input v-model="searchForm.title" placeholder="请输入标题"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" @click="get_table_data">查询</el-button>
                    <el-button type="warning" @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
            <div>
                <!--
                    <el-button type="primary" size="small" @click="handleAdd">添加</el-button>
                    -->
                <el-button type="danger" size="small" v-if="multipleSelection.length !== 0" @click="handleDelete(multipleSelection.map(item=>item.id))">批量删除</el-button>
            </div>
            <el-table
                    :data="tableData"
                    border
                    size="small"
                    height="calc(100% - 144px)"
                    style="width: 100%;margin-top: 12px"
                    :header-cell-style="{backgroundColor:'#f5f7fa'}"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        fixed
                        align="center"
                        width="40">
                </el-table-column>
                <el-table-column
                        prop="id"
                        fixed
                        align="center"
                        label="博客ID"
                        width="60">
                </el-table-column>
                <el-table-column
                        label="封面"
                        align="center"
                        width="100">
                    <template slot-scope="scope">
                        <el-image style="height: 48px" :src="scope.row.cover === null?``:`/static/source/${scope.row.cover}`"></el-image>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="user"
                        label="作者">
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="标题"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="summary"
                        label="摘要"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="tag"
                        label="标签">
                </el-table-column>
                <el-table-column
                        prop="type"
                        label="博客类别">
                </el-table-column>
                <el-table-column
                        label="审核"
                        align="center"
                        width="280">
                    <template slot-scope="scope">
                        <el-radio-group @change="val=>handleExamine(val,scope.row.id)" v-model="scope.row.examine">
                            <el-radio :label="0">待审核</el-radio>
                            <el-radio :label="1">通过</el-radio>
                            <el-radio :label="2">不通过</el-radio>
                        </el-radio-group>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="120"
                        fixed="right"
                        align="center">
                    <template slot-scope="scope">
                        <!--
                        <el-button type="text" style="color: #E6A23C" @click="handleEdit(scope.row)">编辑</el-button>
                        -->
                        <el-button type="text" style="color: #F56C6C" @click="handleDelete([scope.row.id])">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="text-align: center">
                <el-pagination
                        @size-change="handleSizeChange"
                        style="text-align:center;margin-top:12px"
                        background
                        @current-change="handleCurrentChange"
                        :current-page="page.page_index"
                        :page-size="page.page_size"
                        :page-sizes="[30,50,100,200]"
                        layout="total, sizes, prev, pager, next"
                        :total="page.total">
                </el-pagination>
            </div>
        {% endverbatim myblock %}
    </div>
{% endblock %}

{% block out_script %}
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    url: {
                        sea: "/ad/articlelist/",
                        add: '/ad/add_user/',
                        del: '/ad/delete_articlelist/',
                        edit: '/ad/update_articlelist/',
                    },
                    searchForm: {
                        first_name: "",
                        title: "",
                    },
                    tableData: [],
                    multipleSelection: [],
                    page: {
                        page_index: 1,
                        page_size: 30,
                        total: 0,
                    },
                }
            },
            methods: {
                // 查询
                get_table_data() {
                    axios.post(this.url.sea, {...this.searchForm, ...this.page}).then(res => {
                        let {code, data, msg} = res.data
                        if (code === 0) {
                            this.tableData = data.data
                            console.log(this.tableData)
                            this.page.total = data.total
                        } else {
                            this.$message.error(msg)
                        }
                    })
                },
                // 重置查询表单
                handleReset() {
                    this.$refs.searchForm.resetFields()
                    this.page.page_index = 1
                    this.get_table_data()
                },
                // 删除
                handleDelete(idlist) {
                    this.$confirm('此操作将永久删除所选记录, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.post(this.url.del, {idlist: idlist}).then(res => {
                            let {code, data, msg} = res.data
                            if (code === 0) {
                                this.get_table_data()
                                this.$message.success(msg)
                            } else {
                                this.$message.error(msg)
                            }
                        })
                    }).catch(() => {

                    });
                },
                // 改变每页显示条数
                handleSizeChange(val) {
                    this.page.page_size = val
                    this.get_table_data()
                },
                // 显示第几页
                handleCurrentChange(val) {
                    this.page.page_index = val
                    this.get_table_data()
                },
                // 表格多选时
                handleSelectionChange(val) {
                    this.multipleSelection = val;
                },
                handleExamine(val,id) {
                    this.$confirm(`是否将此博客设置为【${val === 0 ? '待审核' : (val === 1 ? '通过' : '不通过')}】？`, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.post(this.url.edit, {id: id, examine: val}).then(res => {
                            let {code, data, msg} = res.data
                            if (code === 0) {
                                this.get_table_data()
                                this.$message.success(msg)
                            } else {
                                this.$message.error(msg)
                            }
                        })
                    }).catch(() => {
                        this.get_table_data();
                    });
                }
            },
            mounted() {
                this.get_table_data()
            }
        })
    </script>
{% endblock %}


{% block out_css %}
    <style>
        #app {
            width: 100%;
            height: 100%;
            padding: 12px;
            box-sizing: border-box;
        }
    </style>
{% endblock %}
